<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }
        
        .box {
            background: #eff8ff;
            font-size: 12px;
            width: 411px;
            height: 427px;
            /* border: 1px solid red; */
            margin: 100px auto;
            margin-bottom: 0;
        }
        
        .input_list {
            position: relative;
            /* background: red; */
            /* margin-bottom: 29px; */
            box-sizing: border-box;
            width: 100%;
            height: 47px;
            /* border: 1px solid red; */
        }
        
        .box .input_list:nth-child(2) {
            /* background: red; */
            margin-top: 10px;
        }
        
        .input_list input {
            background: #fff;
            box-sizing: border-box;
            width: 410px;
            height: 45px;
            text-indent: 12px;
            outline: none;
            border: 0;
            border: 1px solid #ccc;
        }
        /* .input_list input[type="password"] {} */
        
        .input_list .yan {
            position: absolute;
            top: 0px;
            right: 0px;
            width: 48px;
            height: 48px;
            /* border: 1px solid red; */
        }
        
        .box .input_list:nth-child(6) {
            clear: both;
            border: 1px solid #ccc;
        }
        
        .box .input_list:nth-child(6) input[type="text"] {
            float: left;
            width: 283px;
            height: 45px;
            border: 0;
            border-right: 1px solid #ccc;
            /* background: red; */
        }
        
        .hein_info {
            color: #666;
            box-sizing: border-box;
            height: 29px;
            line-height: 29px;
            width: 100%;
            /* border: 1px solid red; */
        }
        
        button {
            float: left;
            width: 126px;
            height: 45px;
            outline: none;
            border: 0;
            cursor: pointer;
        }
        
        .box .input_list:nth-child(8) {
            clear: both;
            /* border: 1px solid #ccc; */
        }
        
        .right {
            color: green;
        }
        
        .error {
            color: red;
            /* z-index: ; */
        }
    </style>
</head>

<body>
    <div class="box">

        <h2>欢迎注册网易邮箱</h2>
        <div class="input_list">
            <input type="text" name="email" id="email" placeholder="邮箱地址" maxlength="20">
        </div>

        <div class="hein_info">
            <img src="" />
            <span class="p1">以字母开头，使用5到20个字符组合(字母、数字、点、下划线)</span>
        </div>
        <div class="input_list">
            <input type="password" name="password" id="password" placeholder="密码">
            <div class="yan"><img src="img/close.png" alt="关"></div>
        </div>
        <div class="hein_info"><img src=""><span class="p2"></span></div>
        <div class="input_list">
            <input type="text" name="phoneNumber" id="phoneNumber" placeholder="+86 手机号"><button>获取验证码</button>

        </div>
        <div class="hein_info"><img src=""><span class="p3"></span></div>

        <div class="input_list">
            <input type="text" name="code" id="code" placeholder="验证码">

        </div>
        <div>
            <div class="hein_info"><img src=""><span class="p4"></span></div>

        </div>
        <script>
            /*           百度查找 以下 正则表达式： 
                                    邮箱 
                                    用户名  6-16 位 数字字母下划线 
                                    密码    6-16 的字母
                                    手机号
                                    验证码  4位的数字和字母 /^[0-9A-Za-z]{4}$/
                                    将以上内容做成一个 表单，验证效果  仿照  163的注册表单 */

            // 获取元素
            // 获取邮箱框
            var oEmail = my$("#email")[0];
            // 获取密码框
            var oPassword = my$("#password")[0];
            // 获取手机号框
            var oPhone = my$("#phoneNumber")[0];
            console.log(oPhone);
            // 获取验证码
            var oCode = my$("#code")[0];
            console.log(oCode);
            //获取眼按钮
            var oYan = my$("img")[1];
            // console.log(oYan);

            // console.log(my$("span"));
            // console.log(my$("img"));

            oEmail.onblur = function() {
                var re = /^[a-zA-Z0-9-_]{5,20}$/;
                if (re.test(this.value)) {
                    console.log("用户输入正确!");
                    my$("span")[0].innerHTML = "用户邮箱输入正确";
                    this.style.border = "1px solid green";
                    my$("img")[0].src = "./img/right.png";
                    my$("span")[0].className = "right";
                } else if (this.value == "") {
                    this.style.border = "1px solid red";
                    my$("img")[0].src = "";
                    my$("span")[0].style.zIndex = "10";
                    my$("span")[0].className = "error";
                    my$("span")[0].innerHTML = "账号不能为空";
                } else {
                    console.log("用户输入格式错误!");
                    this.style.border = "1px solid red";
                    my$("img")[0].src = "";
                    my$("span")[0].className = "error";
                    my$("span")[0].innerHTML = "账号格式错误";
                }

            }
            oPassword.onfocus = function() {
                my$("span")[1].innerHTML = "使用6到16个字符组合，至少包含字母、数字和符号中的2种";
            }
            var flag = true;

            oYan.onclick = function() {
                console.log(flag);
                if (flag) {
                    oPassword.type = "text";
                    // oYan.className = "yan";
                    this.src = "img/open.png";
                    this.alt = "开";
                    flag = false;
                } else {
                    oPassword.type = "password";
                    this.src = "./img/close.png";
                    flag = true;
                }
            }
            oPassword.onblur = function() {
                // ^(?![\d]+$)(?![a-zA-Z]+$)(?![^\da-zA-Z]+$).{6,20}$

                var re = /^(?![\d]+$)(?![a-zA-Z]+$)(?![^\da-zA-Z+$]).{6,20}$/;

                if (re.test(this.value)) {
                    console.log("用户输入正确!");
                    my$("span")[1].innerHTML = "用户密码输入正确";
                    this.style.border = "1px solid green";
                    my$("img")[2].src = "./img/right.png";
                    my$("span")[1].className = "right";
                } else if (this.value == "") {
                    this.style.border = "1px solid red";
                    my$("img")[2].src = "";
                    my$("span")[1].style.zIndex = "10";
                    my$("span")[1].className = "error";
                    my$("span")[1].innerHTML = "密码不能为空";
                } else {
                    console.log("用户输入格式错误!");
                    this.style.border = "1px solid red";
                    my$("img")[2].src = "";
                    my$("span")[1].className = "error";
                    my$("span")[1].innerHTML = "密码格式错误";
                }



            }

            oPhone.onblur = function() {
                // /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/
                var re = /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/;

                if (re.test(this.value)) {
                    console.log("用户输入正确!");
                    my$("span")[2].innerHTML = "用户输入正确";
                    this.style.border = "1px solid green";
                    my$("img")[3].src = "./img/right.png";
                    my$("span")[2].className = "right";
                } else if (this.value == "") {
                    this.style.border = "1px solid red";
                    my$("img")[3].src = "";
                    my$("span")[2].style.zIndex = "10";
                    my$("span")[2].className = "error";
                    my$("span")[2].innerHTML = "手机号不能为空";
                } else {
                    console.log("用户输入格式错误!");
                    this.style.border = "1px solid red";
                    my$("img")[3].src = " ";
                    my$("span")[2].className = "error";
                    my$("span")[2].innerHTML = "格式有误，请输入11位中国大陆手机号码";
                }
            }

            oCode.onblur = function() {
                var re = /^[0-9A-Za-z]{4}$/;

                if (re.test(this.value)) {
                    console.log("用户输入正确!");
                    my$("span")[3].innerHTML = "用户输入正确";
                    this.style.border = "1px solid green";
                    my$("img")[4].src = "./img/right.png";
                    my$("span")[3].className = "right";
                } else if (this.value == "") {
                    this.style.border = "1px solid red";
                    my$("img")[4].src = "";
                    my$("span")[3].style.zIndex = "10";
                    my$("span")[3].className = "error";
                    my$("span")[3].innerHTML = "验证码不能为空";
                } else {
                    console.log("用户输入格式错误!");
                    this.style.border = "1px solid red";
                    my$("img")[4].src = " ";
                    my$("span")[3].className = "error";
                    my$("span")[3].innerHTML = "验证码错误，请重新输入";
                }



            }

            function my$(select) {
                return document.querySelectorAll(select);
            }
        </script>
</body>

</html>